import {
  StyleSheet, Text, View, Dimensions, PixelRatio, Share, Image, Platform, Animated
} from 'react-native';
import react, { useState, useEffect, useRef } from 'react';
import { TouchableOpacity } from 'react-native';
import './global';

const Btn = ({ style, font, children, ...rest }) => {
  return (
    <TouchableOpacity
      {...rest}
      style={
        [{ alignItems: 'center', justifyContent: 'center' }, style
        ]}
    // onPress={()=>{console.log(1234)}}
    >
      <Text style={font}>{children}</Text>
    </TouchableOpacity>
  )
}


export default function App() {
  const share = async () => {
    await Share.share(
      { message: 'hello' },
      { dialogTitle: '标题' },
    )
    console.log(result)
  }
  const w = useRef(new Animated.Value(10)).current;
  const change = () => {
    // Animated.timing(w,{
    Animated.spring(w,{
      toValue:100,
      duration:500,
      useNativeDriver:false
    }).start();
  }
  return (
    <View style={styles.container}>
      <Animated.View style={
        { width: w, height: 100, backgroundColor: 'green' }
      }>
      </Animated.View>
      <Btn
        style={{ width: p2d(150), height: p2d(150), backgroundColor: 'red' }}
        font={{ color: 'white', fontSize: 20 }}
        onPress={change}>变化</Btn>
      <Btn
        onPress={share}
        style={{ width: p2d(150), height: p2d(150), backgroundColor: 'red', borderRadius: 25 }}
        font={{ color: 'white', fontSize: 20 }}
      >
        自定义按钮
      </Btn>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
